<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-23 15:34:52
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-06-08 17:30:56
 * @FilePath: \nien-vue3-admin\src\views\finance\payableManage\summary\feeOther\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--
 * @Author: 瞿旺兴 18774621495@163.com
 * @Date: 2022-05-23 15:34:56
 * @LastEditors: 瞿旺兴 18774621495@163.com
 * @LastEditTime: 2022-05-23 15:57:09
 * @FilePath: \nien-vue3-admin\src\views\finance\payableManage\summary\payableFeeSummary\index.vue
 * @Description: 提单应付汇总
-->
<template>
  <custom-container ref="customContainerRef" :config="config" />
  <detail-dialog ref="DetailDialogRef" />
</template>

<script setup lang="ts">
import { ref, computed, reactive, defineAsyncComponent } from 'vue'
import { ElButton, ElMessage } from 'element-plus'
import { DictDirection } from '@/store/modules/dicts'
import { getSummaries } from '@/utils'

const DetailDialog = defineAsyncComponent(() => import('./components/DetailDialog.vue'))

const DetailDialogRef = ref(null)
const queryParams = reactive({
  pageSize: 10,
  pageNum: 1,
  customerCode: undefined,
  identificationNo: undefined,
  timeRange: undefined,
})

const config = computed({
  get() {
    return {
      query: {
        fields: [
          {
            label: '服务商',
            prop: 'identificationNo',
          },
          {
            label: '提单号',
            prop: 'identificationNo',
          },
          {
            type: 'select',
            label: '运输类型',
            prop: 'customerCode',
            option: {
              clearable: true,
              dictInfo: { dict: DictDirection.客户 },
            },
          },
          {
            type: 'datepicker',
            label: '业务日期',
            prop: 'timeRange',
            option: {
              type: 'daterange',
              clearable: true,
              rangeSeparator: '-',
              startPlaceholder: '开始日期',
              endPlaceholder: '结束日期',
            },
          },
        ],
        queryParams,
        formOption: {
          labelWidth: 100,
        },
      },
      btns: [
        {
          title: '导出',
          type: 'primary',
          onClick: (e) => {
          },
        },
        {
          title: '导出详情列表',
          type: 'danger',
          onClick(e) {
          },
        },
      ],
      table: {
        columns: [
          { type: 'selection', width: '55' },
          { label: '平台', align: 'center', prop: 'id' },
          { label: '车牌号', align: 'center', prop: 'identificationNo' },
          { label: '原站点', align: 'center', prop: 'addressAndTelephoneNo' },
          { label: '转运站点', align: 'center', prop: 'bankAccountNo' },
          { label: '运输方式', align: 'center', prop: 'mail' },
          { label: '仓库状态', align: 'center', prop: 'remarks' },
          { label: '已付总金额', align: 'center', prop: 'remarks' },
          { label: '未付总金额', align: 'center', prop: 'remarks' },
          { label: '应付总金额', align: 'center', prop: 'remarks' },
          { label: '创建人', align: 'center', prop: 'remarks' },
          { label: '创建时间', align: 'center', prop: 'remarks' },
          {
            label: '操作',
            align: 'center',
            width: '320',
            fixed: 'right',
            render(h, params) {
              return [
                h(
                  ElButton,
                  {
                    text: true,
                    type: 'primary',
                    onClick: () => {
                      DetailDialogRef.value.open()
                    },
                  },
                  {
                    default: () => '详情',
                  },
                )]
            },
          },
        ],
        event: {
          showSummary: true,
          summaryMethod: getSummaries([{ column: 'receivingTotalWeight' }]),
        },
      },
      api: (p) => {
        const obj = JSON.parse(JSON.stringify(p))
        if (obj.timeRange && obj.timeRange.length) {
          obj.startTime = obj.timeRange[0]
          obj.endTime = obj.timeRange[1]
        }
        delete obj.timeRange
        return Promise.resolve({ code: 200, data: [{}, {}] }) 
      },
    }
  },
  set(val) {
    return val
  },
})

</script>